/* app css stylesheet */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, "Microsoft YaHei", "Helvetica Neue", Helvetica, sans-serif;
}
body {
    margin: 0;
    font-size: 14px;
    line-height: 17px;
}
/*
  Force full width & height.
  If this block is removed, the layout height/length will be determined by
  the amount of content in the page. That might result in a page which has
  a footer only a few inches from the top of the viewport, or one which
  scrolls beyond the viewport.
  This forces the layout to always be full screen regardless of how much,
  or how little, content is in place. Neither is "right" or "wrong", there
  are valid cases for each. I just want to be clear what's controlling the
  page/viewport height.
*/

html,
body,
.viewport {
    width: 100%;
    height: 100%;
    margin: 0;
}

input: -webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
@font-face {font-family: "iconfont";
  src: url('/static/fonts/iconfont.eot'); /* IE9*/
  src: url('/static/fonts/iconfont.eot') format('embedded-opentype'), /* IE6-IE8 */
  url('/static/fonts/iconfont.woff') format('woff'), /* chrome, firefox */
  url('/static/fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('/static/fonts/iconfont.svg') format('svg'); /* iOS 4.1- */
}
@font-face {font-family: "iconfont1";
  src: url('/static/fonts/iconfont1.eot'); /* IE9*/
  src: url('/static/fonts/iconfont1.eot') format('embedded-opentype'), /* IE6-IE8 */
  url('/static/fonts/iconfont1.woff') format('woff'), /* chrome, firefox */
  url('/static/fonts/iconfont1.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('/static/fonts/iconfont1.svg') format('svg'); /* iOS 4.1- */
}
.icon-yonghu:before { font-family:"iconfont" !important;font-style: normal; content: "\e6ce";height:30px;width:14px;display: block;position: absolute;line-height: 30px;}
.icon-mima:before { font-family:"iconfont1" !important;font-style: normal;content: "\e655";height:30px;width:14px;display: block;position: absolute;line-height: 30px; }
.icon-mima1:before { font-family:"iconfont1" !important;font-style: normal;content: "\e7c6"; }
.yonghu-denglu{
    width:14px;
    height:30px;
    position: absolute;
    bottom:10px;
}
/* encapsulate the various syntax in helper clases */


/* inspired by http://infrequently.org/2009/08/css-3-brogress/ */


/* items flex/expand vertically */

.vbox {
    /* brevious syntax */
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;
    /* current syntax */
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}


/* items flex/expand horizontally */

.hbox {
    /* brevious syntax */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal;
    /* current syntax */
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.space-between {
    /* brevious syntax */
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-box-pack: justify;
    box-pack: justify;
    /* current syntax */
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
}


/* I went with a fixed height header & footer because it's a common case.
  This could easily be altered to flex broportionally with the page.
*/

header {
    color: #fff;
    min-height: 50px;
}

header a,
header a:hover,
header a:focus,
header .nav>li>a:hover,
header .nav>li>a:focus {
    /*color: #fff;*/
    text-decoration: none;
}

.main {
    min-height: 1px;
    height: 100%;
    /* brevious syntax */
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
    /* current syntax */
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
}


/* candy */

.zs-fl {
    float: left;
}

.zs-fr {
    float: right;
}

.zs-vt {
    vertical-align: top;
}

.zs-control-radius-4 {
    border-radius: 4px !important;
}

.zs-control-top-left-radius-4 {
    border-radius: 4px 0 0 0 !important;
}

.zs-control-top-right-radius-4 {
    border-radius: 0 4px 0 0 !important;
}

.zs-control-top-radius-4 {
    border-radius: 4px 4px 0 0 !important;
}

.zs-control-bottom-radius-4 {
    border-radius: 0 0 4px 4px !important;
}

.zs-control-bottom-radius-6 {
    border-radius: 0 0 6px 6px !important;
}

.zs-control-left-radius-4 {
    border-radius: 4px 0 0 4px !important;
}

.zs-control-right-radius-4 {
    border-radius: 0 4px 4px 0 !important;
}

.zs-bottom-20 {
    margin-bottom: 20px;
}


/* candy */


/* theme color */

.zs-theme-main {
    background: #5485fe;
    color: white;
    transition: all 0.07s linear 0s;
}

.zs-theme-main:hover {
    background: #5485fe;
}

.zs-theme-main:active {
    background: #5485fe;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) inset;
}

.zs-theme-background {
    background: #5485fe;
}


/* theme color */

.zs-login-background {
    /*background: #242a33; /* Old browsers */
    /*background: -moz-linear-gradient(top,  #242a33 0%, #242a33 100%); /* FF3.6-15 */
    /*background: -webkit-linear-gradient(top,  #242a33 0%,#242a33 100%); /* Chrome10-25,Safari5.1-6 */
    /*background: linear-gradient(to bottom,  #242a33 0%,#242a33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242a33', endColorstr='#242a33',GradientType=0 ); /* IE6-9 */
    background-image: url('/static/img/bg.jpg');
    width: 100%;
}

.zs-login-change-language {
    position: absolute;
    top: 13px;
    right: 20px;
}

.zs-login-change-language-link-normal {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

.zs-login-change-language-link-normal:hover {
    color: rgba(255, 255, 255, 1);
    text-decoration: underline;
}

.zs-login-change-language-link-normal:focus {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

.zs-login-change-language-link-current {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.zs-login-change-language-link-current:hover {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.zs-login-change-language-link-current:focus {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.zs-login-form-input {
    width: 300px;
    /*height: 44px;*/
    padding: 0 1px;
    border: none;
    margin-bottom: 1px;
    outline: none;
    font-size: 14px;
    padding-left:25px;
}

.zs-login-button {
    display: inline-block;
    padding: 8px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 50px !important;
    width: 100%;
    outline: none;
}

input::-webkit-input-placeholder {
    /* WebKit browsers*/
    color: #a6afc8;
}

input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18*/
    color: #a6afc8;
}

/*input::-moz-placeholder {
    /* Mozilla Firefox 19+*/
    /*color: #a6afc8;
}*/

input:-ms-input-placeholder {
    /* Internet Explorer 10+*/
    color: #a6afc8;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    width: 170px;
    text-align: right;
    padding-right: 30px;
    color: #747982;
    font-weight: normal;
}

.zs-form-section-title {
    text-align: left;
    font-size: 16px;
    display: block;
    padding-top: 20px;
}

@media (min-width: 768px) {
    .modal-sm {
        width: 600px;
    }
    .modal-content {
        box-shadow: none;
        /*border-radius: 10px !important;*/
        border-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-top: -40px;
    }
}

.zs-event-list-container {
    padding: 20px;
    width: 300px;
    box-shadow: -5px 0 0 rgba(0, 0, 0, 0.07);
    position: absolute;
    top: 61px;
    bottom: 0;
    right: 0;
    background: white;
    z-index: 29;
    overflow-y: scroll;
}

.zs-alert-toast {
    background: #ED7441;
    border-radius: 4px !important;
    height: 30px;
    color: white;
    font-size: 14px;
    line-height: 30px;
}


/*******************new version ********************/

.login_body {
    position: absolute;
    width: 777px;
    height: 420px;
    top: 50%;
    left: 50%;
    margin-top: -210px;
    margin-left: -388.5px;
    overflow: hidden;
}

.login_img {
    width: 40.16%;
    height: 100%;
    float: left;
}

.login_img img {
    width: 29%;
    top: 50%;
    position: absolute;
    margin-top: -70px;
}

.login_join {
    width: 59.83%;
    float: left;
    padding: 15px;
    padding-left: 45px;
    padding-top:8px;
    border-left: 1px solid #343947;

}
.login_join .join_title {
    line-height: 16px;
    color: #fff;
    font-size: 16px;
    top:0px;
}

.form-group {
    margin-top: 53px;
}

.zs-login-form-input {
    background-color: transparent;
    height: 30px;
    bottom: 10px;
    line-height: 30px;
    color:#49495f;
}
.login_password {
    margin-top: 0px;
}

.login_username,
.login_password {
    width: 100%;
    height: 65px;
    border-bottom: 1px solid #383c4a;
    position: relative;
    color:#49495f;
    padding:25px 0px 10px 0px;
    -moz-transition: all 0.2s ease-out 0s;
-webkit-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}

.login_username img,
.login_password img {
    padding: 25px 20px 30px 13px;
}

.Products_marked {
    width: 360px;
    height: 117px;
    text-align: center;
    position: fixed;
    bottom: 0px;
    left: 50%;
    margin-left: -255px;
    color: #2b323b;
}

.my_password {
    font-size: 12px;
    color: #6f768b;
    text-decoration: none;
    line-height: 40px;
    float: right;
}
#sdf::-moz-placeholder{
    color:#49495f;   
}
#sdf::-webkit-input-placeholder{
    color:#49495f;   
}
#clean_this::-webkit-input-placeholder{
    color:#49495f;   
}
.username_error{
    position:absolute;
    top:60px;
    color:#b40000;
}